import React, { Component } from 'react';
import { Card, List } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import LinkButton from '../../components/link-button';
let allData = [{
    "_id": {
      "$oid": "5e12b8bce31bb727e4b0e348"
    },
    "parentId": "0",
    "name": "家用电器",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e130e60e31bb727e4b0e34b"
    },
    "parentId": "0",
    "name": "手机",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e130ec7e31bb727e4b0e34c"
    },
    "parentId": "0",
    "name": "洗衣机",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e1346533ed02518b4db0cd7"
    },
    "parentId": "0",
    "name": "图书",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e13467e3ed02518b4db0cd8"
    },
    "parentId": "0",
    "name": "杯具",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e1346c83ed02518b4db0cd9"
    },
    "parentId": "0",
    "name": "纸",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e144dc7297c1138787e96ab"
    },
    "parentId": "0",
    "name": "服装",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e144de1297c1138787e96ac"
    },
    "parentId": "0",
    "name": "玩具",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e16e37e49dc6b38d018fe28"
    },
    "parentId": "0",
    "name": "手机",
    "__v": 0
  },{
    "_id": {
      "$oid": "5e16e38949dc6b38d018fe29"
    },
    "name": "三星",
    "__v": 0,
    "parentId": "0"
  },{
    "_id": {
      "$oid": "5fc0bf33eb957f1b94f4a959"
    },
    "parentId": "0",
    "name": "医药",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc0bfa4eb957f1b94f4a95a"
    },
    "parentId": "0",
    "name": "食品",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc0bfcdeb957f1b94f4a95b"
    },
    "parentId": "0",
    "name": "发型",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc0bfd7eb957f1b94f4a95c"
    },
    "parentId": "0",
    "name": "水果",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc0bfdeeb957f1b94f4a95d"
    },
    "parentId": "0",
    "name": "发饰",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc0bfe6eb957f1b94f4a95e"
    },
    "parentId": "0",
    "name": "图纸",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a1833fe4221c4546275"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "冰箱",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a4133fe4221c4546276"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "微波炉",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a4a33fe4221c4546277"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "电饭煲",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a5133fe4221c4546278"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "洗衣机",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a6533fe4221c4546279"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "消毒碗柜",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a6f33fe4221c454627a"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "电视",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc30a7a33fe4221c454627b"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "抽油烟机",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc5a5ff4870c82a702c5efd"
    },
    "parentId": "0",
    "name": "bbb",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc5b24b4870c82a702c5f05"
    },
    "parentId": "0",
    "name": "2",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc5b2ae4870c82a702c5f06"
    },
    "parentId": "0",
    "name": "34",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc5b2b84870c82a702c5f07"
    },
    "parentId": "5fc5b2ae4870c82a702c5f06",
    "name": "222",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc74b650dd9b10798413162"
    },
    "parentId": "5e12b8bce31bb727e4b0e348",
    "name": "电脑",
    "__v": 0
  },{
    "_id": {
      "$oid": "5fc9e7cc618171388c09b7eb"
    },
    "parentId": "0",
    "name": "哈哈哈",
    "__v": 0
  }];

allData.forEach(v => v['_id'] = v['_id']['$oid']);

// 一级列表所有数据  
let dataSource = allData.filter(v => v.parentId === '0'); 

class ProductDetail extends Component {

    async UNSAFE_componentWillMount(){
        const { pCategoryId, categoryId } = this.props.location.state;
        if(pCategoryId === '0'){
            // 一级分类
            const cname1 = dataSource.find(v => v['_id'] === categoryId).name;
            this.setState({ cname1 });
        }else{
            const cname1 = allData.find(v => v['_id'] === pCategoryId).name;
            this.setState({ cname1 });
            // 二级分类
            const cname2 = allData.find(v => v['_id'] === categoryId) && allData.find(v => v['_id'] === categoryId).name;
            this.setState({ cname2 });

        }
    }
    
    render() { 
        
        // 读取路由携带过来的参数
        const { name, desc, price, imgs, detail } = this.props.location.state;
        const { cname1, cname2 } = this.state;

        const title = (
            <span>
                <LinkButton>
                    <ArrowLeftOutlined 
                    style={{ marginRight: '5px', fontSize: '18px'}} 
                    // props.history.goBack() 后退
                    onClick={() => this.props.history.goBack()}
                    />
                </LinkButton>
                <span>商品详情</span>
            </span>
        )

        return (
            <Card title={title} className="product-detail">
               <List>
                    <List.Item>
                        <span className="left">
                            商品名称：
                            <b>{name}</b>
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className="left">
                            商品描述：
                            <b>{desc}</b>
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className="left">
                            商品价格：
                            <b>{price} 元</b>
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className="left">
                            所属分类：
                            <b>{cname1} {cname2 && '-->' + cname2}</b>
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className="left">
                            商品图片：
                            <b>
                            { imgs.map((v, i) => <img src={v} alt="" className='product-img' key={i} />)}
                            </b>
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className="left">
                            商品详情：
                            <b dangerouslySetInnerHTML={{__html: detail }}></b>
                        </span>
                    </List.Item>
               </List>
            </Card>
        );
    }
}
 
export default ProductDetail;